<template>
<div class="pb50 plan-setiting">
    <div class="d-s-s f-w">
      <div
        class="item d-c-c d-c mb16"
        v-for="(item, index) in planList"
        :key="index"
      >
        <div class="f16 fb pb16">{{item.planName}}</div>
        <div class="f14 gray9"> {{$t('plus.paid_amount')}} 

<span class="orange">{{item.money}}</span>
        </div>
        <div class="f14 gray9"> {{$t('plus.received_amount')}} 

<span class="orange">{{item.giftMoney}}</span>
        </div>
        <div class="f14 gray9"> {{$t('plus.bonus_amount')}} 

<span class="orange">{{item.giveMoney}}</span>
        </div>
        <div class="mt16">
          <span class="p-0-20">
            <el-link type="primary" @click="openEdit(item)">{{$t('plus.edit')}}</el-link>
          </span>
          <span class="p-0-20">
            <el-link type="danger" @click="delClick(item)">{{$t('plus.delete')}}</el-link>
          </span>
        </div>
      </div>

      <div class="item item-add d-c-c d-c" @click="openAdd">
        <el-icon><Plus /></el-icon>
        <span>{{$t('plus.add')}}</span>
      </div>
    </div>

    <Add :open="open_add" @close="closeAdd"></Add>

    <Edit :open="open_edit" @close="closeEdit" :curModel="curModel"></Edit>
  </div>
</template>

<script>
import planApi from "@/api/plan.js";
import Add from "./dialog/Add.vue";
import Edit from "./dialog/Edit.vue";
export default {
  components: {
    Add,
    Edit
  },
  data() {
    return {
      /*是否正在加载*/
      loading: false,
      /*充值套餐列表*/
      planList: [],
      /*是否打开添加*/
      open_add: false,
      /*是否打开编辑*/
      open_edit: false,
      /*当前项*/
      curModel: {}
    };
  },
  created() {
    /*获取数据*/
    this.getData();
  },
  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      let Params = {};
      planApi.listPlan(Params, true).then(res => {
        self.planList = res.data.records;
      }).catch(error => {});
    },
    /*打开添加*/
    openAdd() {
      this.open_add = true;
    },
    /*关闭添加*/
    closeAdd(e) {
      this.open_add = false;
      if (e) {
        this.getData();
      }
    },
    /*打开编辑*/
    openEdit(e) {
      this.curModel = e;
      this.open_edit = true;
    },
    /*关闭编辑*/
    closeEdit(e) {
      this.open_edit = false;
      if (e) {
        this.getData();
      }
    },
    /*删除*/
    delClick: function (row) {
      let self = this;
      ElMessageBox.confirm($t("plus.confirm_delete"), $t("plus.prompt"), {
        type: "warning"
      }).then(() => {
        planApi.deletePlan({
          planId: row.planId
        }).then(data => {
          ElMessage({
            message: $t("plus.delete_success"),
            type: "success"
          });
          self.getData();
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.plan-setiting .item {
  width: 240px;
  height: 160px;
  margin-right: 10px;
  border-radius: 16px;
  background: #f4f5f6;
}

.plan-setiting .item .el-icon-plus {
  font-size: 40px;
  color: #999999;
}

.plan-setiting .item.item-add {
  cursor: pointer;
}
</style>

